<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">数据查询</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="!title" :to="{ name: 'orderStatistics' }"
          ><div class="div3">订单统计数据</div></el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="!title"
          ><div class="div2">订单详情</div></el-breadcrumb-item
        >

        <el-breadcrumb-item v-if="title"
          ><div class="div1" @click="$router.back(-1)">
            客户管理
          </div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-if="!is_null(content.orderUser) && title"
          :to="{
            name: 'customerListOrder',
            query: { id: content.orderUser.userId },
          }"
          ><div class="div3">客户订单</div></el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="title"
          ><div class="div2">订单详情</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 展示收款金额 -->
    <div class="money" v-if="!is_null(content)">
      <div class="headerNav">
        <span>金额状态</span>
        <div class="right"></div>
      </div>
      <div class="contentTotal">
        <p>
          <span>已收金额：￥{{ content.receivedAmount }}</span>
        </p>
        <p>
          <span>待收金额：￥{{ content.waitAmount }}</span>
        </p>
        <p>
          <span>优惠金额：￥{{ content.preferentialAmount }}</span>
        </p>
        <p>
          <span>总金额：￥{{ content.payAmount }}</span>
        </p>
      </div>
    </div>
    <!-- 面包屑导航 -->
    <div class="state">
      <p class="header" v-if="!is_null(content)">
        <span>订单状态</span>
      </p>
      <ul>
        <li>
          <p v-if="!is_null(content)">
            订单状态 :
            {{
              content.orderStatus == 1
                ? "待备货"
                : "" || content.orderStatus == 2
                ? "待发货"
                : "" || content.orderStatus == 3
                ? "待签收"
                : "" || content.orderStatus == 4
                ? "已备货"
                : ""
            }}
          </p>
          <p v-if="!is_null(content)">客户姓名 : {{ content.customerName }}</p>
          <p v-if="!is_null(content)">客户电话 :{{ content.customerPhone }}</p>
          <p v-if="!is_null(content)">客户电话 : {{ content.customerPhone }}</p>
        </li>
        <li>
          <p v-if="!is_null(content)">下单时间 : {{ content.payTime }}</p>
          <p v-if="!is_null(content)">订单编号 : {{ content.orderNo }}</p>
        </li>
        <!-- orderStatus  1-待签收 2-已签收 -->
        <li>
          <el-button
            v-if="
              !is_null(content.orderUser) &&
              !is_null(content.orderUser.logisticsOrder) &&
              content.orderUser.logisticsOrder.orderStatus == '1' &&
              parArray.indexOf('dqskhqs') != -1
            "
            size="mini"
            type="primary"
            @click="customerSign"
            >客户签收</el-button
          >
          <el-button
            v-if="
              !is_null(content.orderUser) &&
              !is_null(content.orderUser.logisticsOrder) &&
              content.orderUser.logisticsOrder.orderStatus == '2' &&
              parArray.indexOf('yqsxgwwqs') != -1
            "
            type="primary"
            size="mini"
            @click="cancelSign"
            >修改未签收</el-button
          >
        </li>
      </ul>
    </div>
    <div class="address">
      <p class="header">收货人信息</p>
      <ul>
        <li>
          <p v-if="!is_null(content)">收货人姓名：{{ content.receiptName }}</p>
          <p v-if="!is_null(content)">联系电话：{{ content.receiptPhone }}</p>
          <p v-if="!is_null(content)">收货地址：{{ content.receiptAddress }}</p>
        </li>
        <li v-if="content">
          <p v-if="!is_null(content.remark)">备注：{{ content.remark }}</p>
          <p v-if="is_null(content.remark)">备注：无</p>
        </li>
      </ul>
    </div>
    <div class="orderBox">
      <p class="header">订单商品</p>
      <el-table :data="commodity" style="width: 100%">
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column
          prop="productNum"
          label="商品数量"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="productUnitPrice"
          label="商品单价"
        ></el-table-column>
        <el-table-column prop="productBrand" label="商品品牌"></el-table-column>
        <el-table-column prop="productType" label="商品分类"></el-table-column>
        <el-table-column prop="productSpec" label="商品规格"></el-table-column>
        <el-table-column label="商品小计">
          <template slot-scope="props">
            {{
              Number(props.row.productNum) * Number(props.row.productUnitPrice)
            }}
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="gift" style="width: 100%">
        <el-table-column prop="productName" label="赠品名称"></el-table-column>
        <el-table-column
          prop="productNum"
          label="赠品数量"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="productUnitPrice"
          label="赠品单价"
        ></el-table-column>
        <el-table-column prop="productBrand" label="赠品品牌"></el-table-column>
        <el-table-column prop="productType" label="赠品分类"></el-table-column>
        <el-table-column prop="productSpec" label="赠品规格"></el-table-column>
        <el-table-column label="赠品小计">
          <template slot-scope="props">
            {{
              Number(props.row.productNum) * Number(props.row.productUnitPrice)
            }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="total">
      <p v-if="!is_null(content)">总计：共 {{ number }} 件</p>
      <p v-if="!is_null(content)">运费：{{ content.freightAmount }}</p>
      <p v-if="!is_null(aggregate)">总价：{{ aggregate }}</p>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  data () {
    return {
      tableData: [],
      orderId: "",
      content: {},
      activeName: "",
      gdActive: "before",
      gdJuage: false,
      logistlist: [],
      title: false, //判断导航栏
      limits: "",
      parArray: [],
      intention: [],
      dialogVisible: false,
      orderMoney: 0, //支付金额
      officialVal: "", //公众号值
      qrtype: "",
      official: [],
      qrHidden: false,
      gift: [],//赠品
      commodity: [],//商品
      aggregate: "",//总价
      number: "",//数量
    };
  },
  created () {
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "orderListCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    this.title = this.$route.query.title;
    // 权限设定判断
    this.id = this.$route.query.id;
    this.intentionAxios();
    this.detailAxios();
  },
  methods: {

    transactionrecord () {
      this.$router.push({
        name: "transactionrecord",
        query: {
          orderId: this.content.orderUser.orderIdStr,
          orderStatus: this.$route.query.orderStatus,
        },
      });
    },
    qrtypeEvent (param) {
      this.dialogVisible = true;
      if (param == 1) {
        this.qrtype = 1;
        this.orderMoney = 0;
        this.officialVal = "";
      } else {
        this.qrtype = 2;
        this.orderMoney = 0;
        this.officialVal = "";
      }
      this.officialEvent(); //公众号列表
    },

    detailAxios () {
      console.log(this.id)
      this.axios
        .get(`/order/sync/order/find/base/selectSyncOrderInfoId?id=${this.id}`)
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            this.content = res.data;
            res.data.orderInfoList.forEach(item => {
              console.log(item)
              if (item.infoType == 2) {
                this.gift.push(item)
              } else {
                this.commodity.push(item)
              }
              this.aggregate = Number(this.aggregate) + (Number(item.productNum) * Number(item.productUnitPrice))
              this.number = Number(this.number) + Number(item.productNum)
              console.log(this.commodity, this.gift)
            })
            // let name = this.intention.filter((res) => {
            //   return (
            //     res.id == this.content.orderUser.userIntentionId
            //   );
            // })[0].name;
            // this.content.orderUser.userIntentionName = name;

            // if (res.data.orderUser.isChange == "1") {
            //   this.gdRecord();
            //   this.gdJuage = true;
            // } else {
            //   this.gdJuage = false;
            // }
          } else {
            this.$message.error(res.message);
          }
        });
    },
    intentionAxios () {
      this.axios
        .post(
          "/order/comm/customeruser/selectCustomerintention",
          {
            salesAuthorityId: JSON.parse(
              sessionStorage.getItem("salesAuthorityId")
            ),
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.intention = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    logistDetail () {
      this.axios
        .get(
          "/order/logistics/node/tracking/" +
          this.content.orderUser.logisticsOrder.id,
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            // console.log('物流节点');
            this.logistlist = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },


    handleClick (tab, event) {
      console.log(tab, event);
    },


    is_null (content) {
      if (content) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.div3 {
  margin-left: -8px;
  background: url(../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.header {
  font-size: 15px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.state {
  background: #fff;
  padding: 10px;
  ul {
    margin: 10px 0;
    li {
      margin-left: 50px;
      line-height: 40px;
      font-size: 15px;
      p {
        display: inline-block;
        margin-right: 50px;
      }
      span {
        display: inline-block;
        margin-left: 20px;
        color: #2d7edf;
        font-weight: bold;
      }
    }
  }
}

/deep/.el-table thead .cell {
  text-align: center !important;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
.money {
  background: #fff;
  padding: 10px;
  margin-bottom: 15px;
  .contentTotal {
    p {
      display: inline-block;
      font-size: 15px;
      margin-right: 20px;
      color: #dd6161;
      margin: 15px 0 15px 10px;
    }
  }
}
// /deep/.el-button {
//   padding: 8px 10px;
// }
/deep/.el-table thead {
  color: #2d7edf;
  .cell {
    text-align: left;
  }
}
.address {
  background: #fff;
  padding: 10px;
  margin: 15px 0;
  ul {
    margin: 10px 0;
    li {
      margin-left: 50px;
      line-height: 40px;
      font-size: 15px;
      p {
        display: inline-block;
        margin-right: 50px;
      }
    }
  }
}
.orderBox {
  background: #fff;
  padding: 10px;
}
.total {
  margin: 15px 0;
  background: #fff;
  padding: 20px 10px;
  text-align: right;
  p {
    display: inline-block;
    font-size: 15px;
    color: #2d7edf;
    margin-left: 30px;
    font-weight: bold;
  }
}
.fix {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}
.headerNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > span {
    color: #2d7edf;
  }
  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    p {
      margin-left: 10px;
      font-size: 15px;
      color: #333;
    }
  }
}
/deep/.el-dialog__body {
  padding: 10px 20px;
}
.qrcode {
  > .div {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    span {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
  }
}
#contentQr {
  height: 150px;
  width: 150px;
  margin: 20px auto 10px;
}
</style>
